<template>
	<div class="ui-paging" :style="style"  :class="[classname]" v-if="data.count!=0">
		<a class="ui-paging-prev" :href="prev" v-if="data.currentpage!=1">
			<span class="ui-paging-item ui-paging-btn ">上页</span>
		</a>
		<template v-for="v in pagearr">
			<span class="ui-paging-item ui-paging-selected" v-if="v==data.currentpage">{{v}}</span>
			<a class="ui-paging-item" :href="createUrl(v)"  v-else >{{v}}</a>
		</template>
		<span class="ui-paging-item" v-if="ismore">...</span>
		<a class="ui-paging-next" :href="next" v-if="data.currentpage!=data.count">
			<span class="ui-paging-item ui-paging-btn" >下页</span>
		</a>
	</div>
</template>

<script>
	/*
	组件属性[
		data:{//分页参数
			url:跳转链接,
			count:页面总数,
			showpage:显示页数,
			currentpage:当前页数,
			field:分页字段
			splitStr:参数分隔方式 &或/(默认)
		}
		style:自定义样式
		classname:自定义class
	]
	*/
	export default{
		props:{
			"data":{type:Object,default:{
				url:"a.com",
				count:20,
				showpage:5,
				currentpage:10,
				field:"page",
				splitStr:'&'
			}},
			'style':{type:null,default:""},
			'classname':{type:null,default:""}
		},
		data(){
			return {
				uiType:"ui-paging",
				ismore:true,
			}
		},
		computed:{
			pagearr(){
				let showpage=this.data.showpage;
				if(showpage==0)return [];
				if(!showpage || showpage>=this.data.count){
                    this.ismore=false;
				    return this.data.count;
                }
				let tmpnum=showpage%2==0?showpage/2-1:parseInt(showpage/2);
				let res=[],start=this.data.currentpage-tmpnum;
                this.ismore=true;
                if(start<=0){
					start=1;
				}else if(start+showpage>=this.data.count){
					this.ismore=false;
					start=this.data.count-showpage+1;
				}
				for(let i=start;i<start+showpage;i++){
					res.push(i);
				}
				return res;
			},
			prev(){
                let url=this.parseUrl();
                if(this.data.splitStr=='&'){
                    return url + this.data.field + '=' + (this.data.currentpage - 1);
                }else if(this.data.splitStr=='/'){
                    return this.data.url + '/' + this.data.field + '/' + (this.data.currentpage - 1);
				}else{
                    return "";
				}
			},
			next(){
			    let url=this.parseUrl();
			    if(this.data.splitStr=='&'){
					return url+this.data.field+'='+(this.data.currentpage+1);
                }else if(this.data.splitStr=='/'){
                    return url+this.data.field+'/'+(this.data.currentpage+1);
                }else{
                    return "";
				}
			}
		},
		methods:{			
			createUrl(num){
                let url=this.parseUrl();
                if(this.data.splitStr=='&'){
                    return url+this.data.field+'='+num;
                }else if(this.data.splitStr=='/'){
                    return url+this.data.field+'/'+num;
                }else{
                    return "";
                }
			},
            parseUrl(){
                let url=this.data.url;
                if(this.data.splitStr=='&'){
                    if(url.substr(-1,1)!="?"){
                        if(url.indexOf('?')>0){
                            url+="&";
                        }else{
                            url+="?";
                        }
                    }
				}else if(this.data.splitStr=='/'){
                    url=url.substr(-1,1)=="/"?url:url+"/";
                }
                return url;
			}
		}
	}
</script>

